<template>
	<div class="paging-component" v-if="pageInfo && pageInfo.totalPage > 1">
		<nav aria-label="Page navigation">
			<ul class="pagination justify-content-center">
				<li :class="['page-item', pageInfo.firstItemClass]">
					<a class="page-link" aria-label="Previous"
							:href="getPageUrl(pageInfo.pageNumber - 1)">
						<span aria-hidden="true">&laquo;</span>
					</a>
				</li>

				<li v-for="item in paginations" 
						:class="['page-item', item.class]">
					<a v-if="item.value" class="page-link"
							:href="getPageUrl(item.value)">
						{{ item.value }}
					</a>
					<a v-else class="page-link">
						...
					</a>
				</li>

				<li :class="['page-item', pageInfo.lastItemClass]">
					<a class="page-link" aria-label="Next"
							:href="getPageUrl(pageInfo.pageNumber + 1)">
						<span aria-hidden="true">&raquo;</span>
					</a>
				</li>
			</ul>
		</nav>
	</div>
</template>


<script type="module">
	import { parsePagination } from '@/common/pagination';
	
	export default {
		props: ['pageInfo', 'getPageUrl'],
		data() {
			return {
				paginations: null,
			};
		},
		watch: {
			pageInfo(pageInfo, oldValue) {
				if (!pageInfo) return;

				this.paginations = parsePagination(
					pageInfo.pageNumber, pageInfo.totalPage);
			}
		}
	} 
</script>


<style scoped>
	.page-item > .page-link {
		color: #337ab7;
		box-shadow: none !important;
	}

	.page-item > .page-link:hover {
		color: #23527c;
	}


	.page-item.disabled > .page-link {
		color: #777;
		background-color: #fff;
		border-color: #ddd;
	}

	.page-item.active > .page-link,
	.page-item.active > .page-link:hover,
	.page-item.active > .page-link:focus {
		color: white;
		border-color: #337ab7;
		background-color: #337ab7;
	}
</style>